<template>
  <div class="nav2">
    <NavTitle title="设施设备告警信息" />
    <div class="px-13px grid grid-cols-3 pt-24px pb-16px gap-38px">
      <div v-for="item in listData" :key="item.title" class="flex-col-center gap-7px nav2_item">
        <div class="font-600">{{ item.title }}</div>
        <div class="font-600 text-20px color-#2ACFFF">{{ infoData[item.prop] }}{{ item.unit }}</div>
      </div>
    </div>
    <div class="nav2_main">
      <div class="flex pl-14px gap-112px items-center nav2_main-t">
        <div class="text-18px">设备事件告警</div>
        <div>累计告警：{{ infoData.alertTotal }}</div>
      </div>
      <div class="nav2_main-b h-345px">
        <el-scrollbar height="100%">
          <div v-for="item in alarmList" :key="item.id" class="flex items-center nav2_main-l" @click="handleList(item)">
            <div class="text-18px color-#63E2FE lh-21px flex-1 truncate-2">{{ item.content }}</div>
            <div class="color2 pl-22px text-center">{{ getTimeData(item).nyr }}<br />{{ getTimeData(item).sfm }}</div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import NavTitle from '@/components/NavTitle'
import { useImageUrl } from '@/utils'
import { webDeviceCountApi, jinyangAlartDetailApi, jinyangIncidentDetailApi } from '@/api'
import dayjs from 'dayjs'
import emitter from '@/utils/mitt'

const listData = ref([
  {
    title: '设备总数',
    icon: useImageUrl('bb.png'),
    prop: 'total'
  },
  {
    title: '设备在线率',
    icon: useImageUrl('ee.png'),
    prop: 'onlineRate',
    unit: '%'
  },
  {
    title: '设备离线率',
    icon: useImageUrl('dd.png'),
    prop: 'offlineRate',
    unit: '%'
  }
])

const infoData = ref({})
const alarmList = ref([])
const getData = async () => {
  const { data } = await webDeviceCountApi()
  infoData.value = data
  alarmList.value = data.alerts
  console.log('设备告警列表', data)
}

getData()

const getTimeData = (item) => {
  const nyr = dayjs(item.happenTime).format('YYYY/MM/DD')
  const sfm = dayjs(item.happenTime).format('HH:mm:ss')
  return {
    nyr,
    sfm
  }
}

const handleList = async item => {
  if (item.type === 0) {
    // 设备告警
    const { data } = await jinyangAlartDetailApi(item.id)
    emitter.emit('clickWarnPoint', {
      data,
      onlyId: item.id,
      type: item.type
    })
  } else {
    // 应急，紧急事件
    const { data } = await jinyangIncidentDetailApi(item.id)
    emitter.emit('clickWarnPoint', {
      data,
      onlyId: item.id,
      type: item.type
    })
  }
}

</script>

<style lang="scss" scoped>
.nav2 {
  color: #fff;
  .nav2_item{
    height: 64px;
    background: url(@/assets/www.png);
    background-size: 100% 100%;
  }
  .nav2_main{
    .nav2_main-t{
      height: 38px;
      background: url(@/assets/d1.png);
      background-size: 100% 100%;
    }
    .nav2_main-l{
      padding-left: 25px;
      padding-right: 8px;
      height: 56px;
      background: rgba($color: #1490F5, $alpha: 0.1);
      position: relative;
      margin-bottom: 13px;
      cursor: pointer;
      &::after{
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 14px;
        height: 14px;
        background: url(@/assets/sj.png);
        background-size: 100% 100%;
      }
    }
  }
}
.color2{
  color: rgba(255, 255, 255, 0.6);
}
</style>
